<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿Pinterest网格瀑布流代码 - 16素材网</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
	  <div class="waterfall">
	  </div>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap-waterfall.js"></script>
<script id="waterfall-template" type="text/template">
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/1.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/2.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/3.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/4.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>Awesome! I love this pin!I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/5.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>How about this? Awesome! I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/6.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>I love this pin!I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/7.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>How about this? Awesome! I love this pin!I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/8.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>I love this pin!I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/9.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>How about this? Awesome! I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/10.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>How about this? Awesome! I love this pin!I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/11.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/12.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/13.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/14.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/15.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/16.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/17.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/18.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/19.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/20.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/1.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/2.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/3.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/4.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>Awesome! I love this pin!I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/5.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>How about this? Awesome! I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/6.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>I love this pin!I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/7.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>How about this? Awesome! I love this pin!I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/8.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>I love this pin!I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/9.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>How about this? Awesome! I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/10.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>How about this? Awesome! I love this pin!I love this pin!</small>
		</div>
	  </div>
	</li>
  </ul>
</script>

<script id="another-template" type="text/template">
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/11.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/12.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/13.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/14.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/15.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/16.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/17.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/18.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/19.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
  <ul class="list-group">
	<li class="list-group-item">
	  <a href="javascript:;">
		<img src="images/20.jpg" />
	  </a>
	</li>
	<li class="list-group-item">
	  <button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
	  <button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
	  <button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
	</li>
	<li class="list-group-item">
	  <div class="media">
		<div class="media-left">
		  <a href="javascript:;">
			<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
		  </a>
		</div>
		<div class="media-body">
		  <h5 class="media-heading">Liber</h5>
		  <small>This is very cool! </small>
		</div>
	  </div>
	</li>
  </ul>
</script>
<script>
  $('.waterfall')
	.data('bootstrap-waterfall-template', $('#waterfall-template').html())
	.waterfall();
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.16sucai.com/" target="_blank">16素材网</a></p>
</div>
</body>
</html>